<template>
  <ul class="advert" :style="{bottom:num+'px'}" v-if="isShow">
    <CloseCircleOutlined @click="close"/>
    <Carousel arrows>
      <template #prevArrow>
        <div class="custom-slick-arrow" :style="{zIndex: 1}">上一页</div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow">下一页</div>
      </template>

      <div class="item" v-for="item in ArticleList">
        <router-link target="_blank" :to="`/articleDetail/${item.article_id}`">
          <img :src="`${api}/a/file/thumb/${item.cover_img_id}`" alt="">
          <p class="nowrap mb0 mt5">
            {{ item.article_title }}
          </p>
        </router-link>
      </div>
    </Carousel>
  </ul>
</template>

<script lang="ts" >
import {defineComponent, onMounted, ref} from 'vue';
import { BackTop , Carousel } from 'ant-design-vue';
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import { api } from '/@/utils';
import {getArticleListApi  } from "/@/api/theme";
export default defineComponent({
  components: {BackTop , Carousel , CloseCircleOutlined },
  setup() {
    const ArticleList = ref([]);
    const isShow = ref<Boolean>(true)
    const num = ref<Number>(-300)
    const close = ()=>{
      isShow.value = false
    }

    const getItemList = () => {
      const Param = {
        current:1,
        size: 12,
        itemId: 'cms_index_advert'
      }
      getArticleListApi(Param).then(({success, data}) => {
        if (success) {
          let {total, records  } = data;
          if (total) {
            ArticleList.value = records;
            setTimeout(()=>{
              num.value = 3
            },1000)

          }else {
            ArticleList.value = []
          }
        }
      });
    }
    const init = () => {
      getItemList()
    }

    onMounted(init)

    return {
      close , isShow , ArticleList , api ,num
    }
  }
})
</script>

<style lang="less" scoped>
.advert{
  position: fixed;
  right: 3px;
  bottom: -300px;
  z-index: 1000;
  width: 340px;
  height: 223px;
  padding: 20px;
  margin-bottom: 0;
  background: white;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  transition: all 1s ease-in-out;

  img{
    display: block;
    width: 300px;
    height: 140px;
  }

  p{
    padding: 5px 0;
  }

  .anticon-close-circle{
    position: absolute;
    top: 3px;
    right: 5px;
    color: #666;
    cursor: pointer;
  }
}

::v-deep(.ant-carousel){
  width: 100%;
  height: 163px;

  .slick-arrow.custom-slick-arrow{
    top: 180px;
    width: 45px;
    height: 25px;
    margin: 0;
    font-size: 14px;
    color: red;
    opacity: 0.9;

    &.slick-prev{
      left: 0 !important;
    }

    &.slick-next{
      right: 0 !important;
    }
  }

  .custom-slick-arrow::before{
    display: none;
  }

  .custom-slick-arrow:hover{
    opacity: 0.5;
  }

   .slick-dots-bottom {
    bottom: 43px;
  }

}

</style>

